<template>
    <div style="width: 100%;">
    <el-skeleton animated :row="11" :loading="gjloading">
        <el-table :data="tableData" v-loading="loading" stripe style="width: 100%" border>
            <el-table-column prop="id" v-if="false" label="编号" width="" />
            <el-table-column type="index" label="序号" align="center" width="80" />
            <el-table-column type="expand">
                <template #default="scope">
                    <div :key="obj.tid" v-for="obj in scope.row.details">
                            <el-tag :key="obj.tid" style="margin-left: 5px;">{{ obj.name }}</el-tag>
                            <el-tag :key="obj.tid" v-if="obj.isFixed==0">模式:随机题目</el-tag>
                            <el-tag v-else type="warning">模式:固定题目</el-tag>
                            <el-tag :key="obj.tid">题目数量:{{ obj.limitCount }}</el-tag>
                            <el-tag :key="obj.tid">正确率:{{ obj.rightPercent }}%</el-tag>
                            <el-tag :key="obj.tid">难度区间:{{obj.minLv}}-{{obj.maxLv}}</el-tag>
                </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="任务名" />
            <el-table-column prop="lv" label="等级" width="" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="xz(scope.row)" plain>选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div>
            <el-pagination :current-page="page" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-size="limit" :total="total" :page-sizes="[6, 6 * 2, 6 * 3, 6 * 4, total]"
                layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>
    </el-skeleton>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import {GetTasks} from '../../api/practice/task/index'
export default defineComponent({
    setup(props: any, context: any) {
        const data = reactive({
            tableData: [],
            loading: false,
            gjloading: true,
            page: 1,
            limit: 5,
            total: 0,
            details: [] as any//下级任务详情
        })

        const events = {
            //任务列表
            getdata() {
                GetTasks({
                    page: data.page,
                    limit: data.limit
                }).then((res: any) => {
                    console.log('----------=====', res)
                    if (res.result == 0) {
                        data.total = res.data.total
                        data.tableData = res.data.data
                        // data.details = res.data.data.details
                        // console.log('11111111',res.data.data)
                        // console.log('=======/////======',res.data.data.details)
                        data.gjloading = false
                    }
                })
            },
            //选择任务
            xz: function (data: any) {
                console.log('-------===-', data)
                context.emit("DialogTask", data)
            },
            //分页
            handleSizeChange(val: any) {
                data.limit = val
                events.getdata();
            },
            handleCurrentChange(val: any) {
                data.page = val
                events.getdata();
            },
        }

        onMounted(() => {
            events.getdata();
        })

        return {
            ...toRefs(data),
            ...events
        }
    },
})
</script>
